<template>
  <div class="friends_apply">
    <div class="apply_title">好友申请</div>
    <ul class="apply_list">
      <el-popover v-for="(item,index) in applyList" :key="index"
          placement="bottom"
          width="280"
          trigger="click">
          <userInfo />
          <li class="apply_item" slot="reference" @click="chooseCard(item)">
            <img class="apply_avatar" :src="item.sendUserImg" />
            <div class="apply_detail">
              <div class="applp_name">{{item.sendUserName}}</div>
              <div class="apply_text">{{item.content}}</div>
            </div>
            <div class="apply_result" v-if="item.joinStatus==1">已添加</div>
            <div class="apply_result" v-if="item.joinStatus==2">已忽略</div>
            <div class="apply_handle" v-if="item.joinStatus==0">
              <div class="apply_btn ignore_btn" @click.stop="ignoreBtn(item)">忽略</div>
              <div class="apply_btn agree_btn" @click.stop="agreeJoin(item)">同意</div>
            </div>
          </li>
      </el-popover>
    </ul>

    <el-dialog
      :visible.sync="agreeDialog"
      width="290px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="dialog_title">好友备注</div>
      <div class="remark_box">
        <textarea class="remark_text" maxlength="30" v-model="remarkText"></textarea>
        <div class="remark_num">{{remarkText.length}}/30</div>
      </div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelAgreeDialog">取消</div>
        <div class="primarybtn">确定</div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="ignoreDialog"
      width="290px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="dialog_tips">确定忽略好友请求吗？</div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelIgnoreDialog">取消</div>
        <div class="primarybtn" @click="rejectJoin">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userInfo from '../user_info'
import {Popover,Dialog,Message} from 'element-ui'
import bus from '../../bus'
import {joinList,refuseJoin,friendsList,addUser} from '../../api/api'
export default {
  name:'friends_apply',
  data(){
    return {
      ignoreDialog:false,
      agreeDialog:false,
      remarkText:'',
      applyList:[],
      applyItem:''
    }
  },
  components: {
    userInfo,
    'el-popover':Popover,
    'el-dialog':Dialog
  },
  mounted(){
    this.getApplyList()
  },
  computed: {
    newMessage() {
      return this.$store.state.message
    },
  },
  watch:{
    newMessage(){
      if(this.newMessage.type==2){
        this.applyList.unshift(this.newMessage)
      }
    }
  },
  methods:{
    //获取申请列表
    getApplyList(){
      let params = {
        userId: this.$store.state.user.id,
        pageNo: 1,
        pageSize: 500,
      }
      joinList(params)
      .then((res) => {
        console.log('this.applyList',res.data)
        this.applyList = res.data.data.list
      })
    },
    //选择卡片
    chooseCard(item){
      item.takeSendUserId = 1
      this.$store.commit('getCardItem',item)
    },
    //点击忽略按钮
    ignoreBtn(item){
      this.applyItem = item
      this.ignoreDialog = true
    },
    //拒绝添加好友
    rejectJoin(){
      let params = {
        joinFriendId:0,
        sendUserId: this.applyItem.sendUserId,
        friendId: this.applyItem.sendUserId,
        joinStatus: 2,
      }
      refuseJoin(params)
      .then((res) => {
        this.getApplyList()
        this.cancelIgnoreDialog()
        Message({
          message: '拒绝成功',
          type: 'success'
        })
      })
    },
    //同意添加好友
    agreeJoin(item){
      this.applyItem = item
      var sendData = {
        cmd:21,
        message:{
          content:"你们已经成为联系人，可以开始聊天了",
          contentImg:"",
          contentVideo:"",
          messageType:12,
          mine:false,
          sendTime:new Date().getTime(),
          sendUserId:this.$store.state.user.id,
          sendUserImg:this.$store.state.user.headImg,
          sendUserName:this.$store.state.user.userName,
          toId:this.applyItem.sendUserId,
          toUserImg:this.applyItem.sendUserImg,
          toUserName:this.applyItem.sendUserName
        },
        type:43,
        remark:""
      }
      console.log(sendData)
      ws.send(JSON.stringify(sendData))

      this.getApplyList()

      let params1 = {
          userId:this.$store.state.user.id
      }
      //重新加载好友列表
      friendsList(params1)
      .then(res => {
          this.$store.commit('getFriendsList',res.data.data.list)
      })

      Message({
        message: '已同意',
        type: 'success'
      })
    },
    //点击同意按钮
    agreeBtn(item){
      this.applyItem = item
      // this.agreeDialog = true
    },
    //关闭同意弹窗
    cancelAgreeDialog(){
      this.agreeDialog = false
      this.remarkText = ''
    },
    //关闭忽略弹窗
    cancelIgnoreDialog(){
      this.ignoreDialog = false
    }
  }
}
</script>

<style scoped>
.friends_apply{
  width:100%;
}
.apply_title{
  height: 56px;
  background: #fcfcfc;
  font-size: 16px;
  line-height: 56px;
  padding: 0 20px;
}
.apply_list{
  overflow: auto;
  background: #f3f3f3;
  height: calc(100% - 56px);
}
.apply_item{
  display: flex;
  align-items: center;
  padding: 10px 20px;
}
.apply_avatar{
  width:44px;
  height:44px;
}
.apply_detail{
  flex:1;
  padding: 0 16px;
}
.applp_name{
  color: #333;
  font-size: 14px;
  margin-bottom:4px;
}
.apply_text{
  font-size: 12px;
  color: #888;
}
.apply_result{
  border: 0;
  background: #f3f3f3;
  flex-shrink: 0;
  width: 75px;
  height: 30px;
  line-height: 30px;
  color: #888;
  font-size: 13px;
  text-align: center;
}
.apply_handle{
  display: flex;
  align-items: center;
}
.apply_btn{
  flex-shrink: 0;
  cursor: pointer;
  width: 75px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}
.apply_btn.ignore_btn{
  border: 1px solid #e2e2e2;
  background: none;
  color: #666;
  margin-right: 20px;
}
.apply_btn.ignore_btn:hover{
  background: #e2e2e2;
}
.apply_btn.agree_btn{
  border: 1px solid #428dfc;
  color: #428dfc;
}
.apply_btn.agree_btn:hover{
  background: #4c94ff;
  color:white;
}

.dialog_title{
  display: flex;
  align-items: center;
  line-height: 42px;
  padding: 0 25px 0 30px;
}
.remark_box{
  width: 224px;
  height: 78px;
  margin-right: 15px;
  font-size: 12px;
  line-height: 17px;
  background: #f8f8f8;
  border-radius: 4px;
  margin: 0 auto 30px;
}
.remark_text{
  width: 200px;
  height: 55px;
  padding: 7px;
  outline: none;
  border: none;
  resize: none;
  font-size: 12px;
  background: #f8f8f8;
  box-sizing: border-box;
}
.remark_num{
  color: #999;
  float: right;
  padding-right: 7px;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.primarybtn.default{
  margin-left: 0px;
}
.primarybtn{
  margin-left:46px;
}
.dialog_tips{
  margin: 46px 0 40px;
  text-align: center;
  font-size: 14px;
  color: #333;
}
</style>